<!-- 张洁 消息 --> 
<template>
 <div class="news h100">
   <header>
      <van-nav-bar :border="false"
            title="消息"/>
   </header>
    <main>
      <!--  -->
      <van-grid :border="false">
            <van-grid-item icon="/img/Jie_img/组 22.png" text="我的委托" @click="goJieson"/> 
            <van-grid-item icon="/img/Jie_img/组 22(2).png" text="邀请回答" @click="goAnswer" />
            <van-grid-item icon="/img/Jie_img/组 22(1).png" text="问答动态" @click="goDynamic"/>
            <van-grid-item icon="/img/Jie_img/组 23.png" text="系统消息" @click="goSystem" />
     </van-grid>

      <van-card
            title="王律师"
            desc="[新的消息]"
            thumb="/img/Jie_img/组2.png"
            icon-size="40px"
            @click="goChat"
      /> 
      <van-card
            title="王律师"
            desc="[新的消息]"
            thumb="/img/Jie_img/组2.png"
            icon-size="40px"
            @click="goChat"
      /> 
    <!-- <Jieson/>
    <Entrust/> -->
    </main>
 </div>
</template>

<script>
import Jieson from './Jie/Jieson.vue'
import Answer from './Jie/Answer.vue'
import Dynamic from './Jie/Dynamic.vue'
import System from './Jie/System.vue'
import Chat from './Jie/Chat.vue'
import { mapActions } from 'vuex'
export default {
   //生命周期
   //准备挂载
   beforeMount() {
   },
   components:{
    Jieson,
    Answer,
    Dynamic,
    System,
    Chat,
    
},
   data(){
      return{
         
      }
   },
   created(){
      this.init()
   },
   methods:{
      ...mapActions("jie",["init"]),
      // 委托咨询
      goJieson(){
         this.$router.push('/jieson')
      },
      goAnswer(){
         this.$router.push('/answer')
      },
      goDynamic(){
         this.$router.push('/Dynamic')
      },
       goSystem(){
         this.$router.push('/system')
      },
       goChat(){
         this.$router.push('/chat')
      },
      
   }
}
</script>

<style scoped>
/* scoped 让样式只在当前组件生效  ！important(父子元素存在同样类名时用)*/
.news{
   background: #FFFFFF;
   display: flex;
   flex-direction: column;
}
html,body{
   width: 750px;
   height: 750px;
}
header{
   width: 100%;
   /* height: 1rem; */
}
/* 委托列 */
.van-grid{
   width: 7.5rem;
   height: 2.01rem;
}
.van-grid .van-icon__image{
   width: 0.83rem;
    height: 0.83rem;
}
.van-card__header{
   height: 1.19rem;
       border-bottom: 0.01rem solid #efefef;
}
.van-card {
    position: relative;
    box-sizing: border-box;
    padding: 1px 8px;
    color: #323233;
    line-height: 12px;
    font-size: 12px;
    background-color: #FFFFFF;
}
/*块的大小 */
.van-grid-item__content{
   height: 2.01rem;
   width: 7.5em;
}

.van-card__content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    justify-content: center;
    min-width: 0;
    min-height: 0.65px;
}
 .van-card__content {
   height: 1.19rem;
} 
a.van-card__thumb {
    width: 0.83rem;
    height:0.83rem;
    line-height: 1.2rem;
}


</style>